import Link from "next/link";
import { getDictionary, type Locale } from "@/lib/site-content";

export default async function PricingPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dictionary = getDictionary(locale as Locale);

  return (
    <div className="page-stack">
      <section className="section-panel hero-tight">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.pricing.tag}</div>
          <h1>{dictionary.pricing.title}</h1>
          <p>{dictionary.pricing.subtitle}</p>
        </div>
      </section>

      <section className="pricing-grid">
        {dictionary.pricing.plans.map((plan) => (
          <article
            className={`pricing-card ${plan.highlight ? "pricing-card-highlight" : ""}`}
            key={plan.name}
          >
            <div className="pricing-top">
              <div>
                <span className="card-kicker">{plan.badge}</span>
                <h2>{plan.name}</h2>
              </div>
              <div className="price-line">
                <strong>{plan.price}</strong>
                <span>{plan.cadence}</span>
              </div>
            </div>
            <p className="pricing-summary">{plan.summary}</p>
            <ul className="bullet-list">
              {plan.features.map((feature) => (
                <li key={feature}>{feature}</li>
              ))}
            </ul>
            <Link className="button button-dark" href={`/${locale}/login`}>
              {plan.cta}
            </Link>
          </article>
        ))}
      </section>

      <section className="section-panel">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.pricing.faqTag}</div>
          <h2>{dictionary.pricing.faqTitle}</h2>
        </div>
        <div className="faq-grid">
          {dictionary.pricing.faqs.map((faq) => (
            <article className="faq-card" key={faq.question}>
              <h3>{faq.question}</h3>
              <p>{faq.answer}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}